<template>
  <div id="home">
    <HeaderOne />
    <div class="center">
      <swiper ref="mySwiper" :options="swiperOptions" class="swiper">
        <swiper-slide v-for="(item, index) in company" :key="index">
          <div class="content">
            <div class="left">
              <h3>{{ item.title1 }}<br />{{ item.title2 }}</h3>
              <p>{{ item.title3 }}</p>
              <span class="bule"></span>
            </div>
            <div class="right">
              <div v-for="(father, index) in item.child" :key="index">
                <dl v-for="(child, inx) in father.children" :key="inx">
                  <dt><img :src="child.image" alt="" /></dt>
                  <dd>
                    <a href="/us" :title="child.title">{{ child.name }}</a>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </swiper-slide>

        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>

      <!-- <div class="indexOne clear">
      <div class="content">
        <div class="left">
          <h3>WHO<br />ARE WE</h3>
          <p>我们是谁</p>
          <span class="bule"></span>
        </div>
        <div class="right">
          <div v-for="(item, index) in company" :key="index">
            <dl v-for="(child, index) in item.children" :key="index">
              <dt><img :src="child.image" alt="" /></dt>
              <dd>
                <router-link to="/us" :title="child.name">{{ child.name }}</router-link>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
    <div class="indexTwo clear"> -->
      <!-- <div class="content">
        <div class="right">
          <div>
            <dl v-for="(item, index) in service" :key="index">
              <dt><img :src="item.image" alt="" /></dt>
              <dd>
                <router-link to="/us" :title="child.name">{{ child.name }}</router-link>
              </dd>
            </dl>
          </div>
        </div>
        <div class="left">
          <h3>WE PROVIDE<br />SERVICES</h3>
          <p>我们能为您提供什么服务</p>
          <span class="bule"></span>
        </div>
      </div>
    </div> -->
      <!-- <div class="indexThree clear">
      <div class="content">
        <div class="left">
          <h3>WHY<br />CHOOSE US</h3>
          <p>为什么选择我们</p>
          <span class="bule"></span>
        </div>
        <div class="right">
          <div>
            <dl v-for="(item, index) in enterprise" :key="index">
              <dt><img :src="item.image" alt="" /></dt>
              <dd>
                <router-link to="/us" :title="child.name">{{ child.name }}</router-link>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div> -->
      <!-- <div class="instructions">
      <div
        v-for="(item, index) in instructions"
        :key="index"
        @click="tiao(index)"
      >
        <img :src="item.image1" alt="" v-if="tabIndex == index" />
        <img :src="item.image2" alt="" v-if="tabIndex != index" />
      </div>
    </div>-->
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HeaderOne from "@/components/HeaderOne.vue";
import "swiper/dist/css/swiper.min.css";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
  name: "Home",
  components: {
    HeaderOne,
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      company: [
        {
          title1: "WHO",
          title2: "ARE WE",
          title3: "我们是谁",
          child: [
            {
              children: [
                {
                  image: require("../assets/index1.png"),
                  name: "公司简介",
                  title: "公司简介-海豚保险",
                },
                {
                  image: require("../assets/home_bg1_img3.png"),
                  name: "企业文化",
                  title: "企业文化-海豚保险",
                },
              ],
            },
            {
              children: [
                {
                  image: require("../assets/index1.png"),
                  name: "公司简介",
                  title: "公司简介-海豚保险",
                },
                {
                  image: require("../assets/home_bg1_img3.png"),
                  name: "企业文化",
                  title: "企业文化-海豚保险",
                },
              ],
            },
          ],
        },
        {
          title1: "WHO",
          title2: "ARE WE",
          title3: "我们是谁",
          child: [
            {
              children: [
                {
                  image: require("../assets/home_bg2_img1.png"),
                  name: "新能源",
                  title: "新能源-海豚保险",
                },
                {
                  image: require("../assets/home_bg2_img2.png"),
                  name: "新物流",
                  title: "新物流-海豚保险",
                },
                {
                  image: require("../assets/home_bg2_img3.png"),
                  name: "员工福利",
                  title: "员工福利-海豚保险",
                },
              ],
            },
          ],
        },
        {
          title1: "WHO",
          title2: "ARE WE",
          title3: "我们是谁",
          child: [
            {
              children: [
                {
                  image: require("../assets/home_bg3_img1.png"),
                  name: "新能源",
                  title: "新能源-海豚保险",
                },
                {
                  image: require("../assets/home_bg3_img2.png"),
                  name: "新物流",
                  title: "新物流-海豚保险",
                },
                {
                  image: require("../assets/home_bg3_img3.png"),
                  name: "员工福利",
                  title: "员工福利-海豚保险",
                },
              ],
            },
          ],
        },
      ],
      swiperOptions: {
        direction: "vertical", // 垂直切换选项
        // loop: true, // 循环模式选项

        // 分页器
        pagination: ".swiper-pagination",
        // paginationClickable参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
        paginationClickable: true,
        // mousewheelInvert参数会使鼠标滚轮控制方向反转。
        mousewheelControl: true,
        mousewheelInvert: false,
        // Some Swiper option/callback...
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    // console.log("Current Swiper instance object", this.swiper);
    this.swiper.slideTo(0, 1000, false);
  },
};
</script>
<style lang="scss" scoped>
.clear {
  clear: both;
}
a {
  text-decoration: none;
}
#home {
  width: 100%;
  // background: cornsilk;
  height: 100vh;
  .swiper-container {
    width: 100vw;
    height: 100vh;
    /* background: gold; */
  }
  .swiper-slide:nth-child(1) {
    // height: 100vh;
    background: url("../assets/home_bg1.jpg") no-repeat;
    background-size: 100% 100%;
    position: relative;

    .content {
      position: absolute;
      top: 25%;
      // left: 50%;
      // top: 0;
      left: 0;
      // bottom: 0;
      right: 0;
      width: 960px;
      margin: auto;

      display: flex;
      justify-content: space-evenly;
      .left {
        // position: absolute;
        h3 {
          font-size: 48px;
          text-align: left;
          color: #fff;
          font-weight: 400;
          line-height: 70px;
        }
        p {
          font-size: 36px;
          color: #fff;
          line-height: 55px;
          text-align: left;
          margin-bottom: 20px;
        }
        span {
          display: block;
          width: 50px;
          height: 10px;
          margin-top: 2rem;
          background: #00bdda;
        }
      }

      .right {
        display: flex;
        justify-content: space-between;
        div {
          width: 250px;
          height: 225px;
          dl {
            width: 250px;
            height: 225px;
            margin-bottom: 10px;
            position: relative;
            dd {
              position: absolute;
              top: 0;
              left: 0;
              width: 250px;
              font-size: 20px;
              color: #fff;
              line-height: 225px;
              background: rgba(0, 189, 218, 0.5);
              text-align: center;
              // cursor: pointer;
              a {
                color: #fff;
                display: block;
                width: 100%;
                height: 100%;
              }
            }
            dd:hover {
              background: rgba(0, 189, 218, 0);
            }
          }
        }
        div:last-child {
          margin: 50px 0px 0px 10px;
        }
      }
    }
  }
  .swiper-slide:nth-child(2) {
    // height: 100vh;
    background: url("../assets/home_bg2.jpg") no-repeat;
    background-size: 100% 100%;
    position: relative;

    .content {
      position: absolute;
      top: 25%;
      // left: 50%;
      // top: 0;
      left: 0;
      // bottom: 0;
      right: 0;
      width: 960px;
      margin: auto;
      display: flex;
      justify-content: space-between;
      flex-direction:row-reverse;
      .left {
        // position: absolute;
        overflow: hidden;
        h3 {
          font-size: 48px;
          text-align: right;
          color: #fff;
          font-weight: 400;
          line-height: 70px;
        }
        p {
          font-size: 36px;
          color: #fff;
          line-height: 55px;
          text-align: left;
          margin-bottom: 20px;
        }
        span {
            display: block;
            width: 50px;
            height: 10px;
            margin-top: 2rem;
            background: #00bdda;
            // text-align: right;
            float: right;
        }
      }

      .right {
        display: flex;
        justify-content: space-between;
        div {
          dl {
            width: 510px;
            height: 125px;
            margin-bottom: 10px;
            position: relative;
            dd {
              position: absolute;
              top: 0;
              left: 0;
              width: 510px;
              font-size: 20px;
              color: #fff;
              line-height: 125px;
              a {
                color: #fff;
                display: block;
                width: 85%;
                height: 100%;
                margin: 0 auto;
              }
            }
          }
          dl:nth-child(1),
          dl:nth-child(3) {
            dd {
              background: url("../assets/pic2.png") no-repeat;
              text-align: left;
            }
            dd:hover {
              background: rgba(0, 189, 218, 0);
            }
          }
          dl:nth-child(2) {
            dd {
              background: url("../assets/pic1.png") no-repeat;
              text-align: right;
            }
            dd:hover {
              background: rgba(0, 189, 218, 0);
            }
          }
        }
      }
    }
  }
  .swiper-slide:nth-child(3) {
    // height: 100vh;
    background: url("../assets/home_bg3.jpg") no-repeat;
    background-size: 100% 100%;
    position: relative;

    .content {
      position: absolute;
      top: 25%;
      // left: 50%;
      // top: 0;
      left: 0;
      // bottom: 0;
      right: 0;
      width: 960px;
      margin: auto;

      display: flex;
      justify-content: space-between;
      .left {
        // position: absolute;
        h3 {
          font-size: 48px;
          text-align: left;
          color: #fff;
          font-weight: 400;
          line-height: 70px;
        }
        p {
          font-size: 36px;
          color: #fff;
          line-height: 55px;
          text-align: left;
          margin-bottom: 20px;
        }
        span {
          display: block;
          width: 50px;
          height: 10px;
          margin-top: 2rem;
          background: #00bdda;
        }
      }

      .right {
        display: flex;
        justify-content: space-between;
        div {
          dl {
            float: left;
            width: 120px;
            height: 460px;
            margin-left: 10px;
            position: relative;
            dd {
              position: absolute;
              top: 0;
              left: 0;
              width: 120px;
              font-size: 20px;
              color: #fff;
              line-height: 460px;
              background: rgba(0, 189, 218, 0.5);
              text-align: center;
              // cursor: pointer;
              a {
                color: #fff;
                display: block;
                width: 100%;
                height: 100%;
              }
            }
            dd:hover {
              background: rgba(0, 189, 218, 0);
            }
          }
          dl:nth-child(2) {
            margin-top: 40px;
          }
        }
      }
    }
  }
  .instructions {
    position: fixed;
    top: 50%;
    right: 2%;
    div {
      display: block;
      margin: 0 auto;
      margin-bottom: 10px;
      cursor: pointer;
    }
  }
}
</style>
